<template>
    <div class="message-warp">
        <!-- <headers :title="'消息'"/> -->
        <tab :custom-bar-width="getBarWidth" :scroll-threshold="5" :line-width="3" bar-active-color="#feba4e">
            <tab-item v-for="(item,index) in tabItem" :selected="index === 0" :key="item.id">{{item.name}}</tab-item>
        </tab>
        <div class="group">
            <div class="cell-box first-cell-box" @click="goleave">
                <div class="news-box flex">
                    <img src="../assets/images/2-avatar.jpg" alt="" class="left">
                    <div class="center">
                        <div class="name-box">互动消息</div>
                        <div class="section-line">
                            {{contengList.contentIdNickName}} {{contengList.content}}
                        </div>
                        <div class="section-line supplement">
                            <span>{{contengList.createDateName}}</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="redTip">New</div>
                    </div>
                </div>
            </div>
            <div class="cell-box  flex" v-for="(item,index) in friendList" :key="index" @click="goChat(item)">
                <div class="news-box flex">
                    <img :src="item.oppositeImg" alt="" class="left">
                    <div class="center">
                        <div class="name-box">{{item.serviceNick}}</div>
                        <div class="section-line">
                            {{item.content}}
                        </div>
                        <div class="section-line supplement">
                            <span>{{item.createDateName}}</span>
                        </div>
                    </div>
                    <!-- <img :src="item.img" alt="" class="right"> -->
                </div>
            </div>
           <!--  <swipeout>
                <swipeout-item @on-close="handleEvents('on-close')" @on-open="handleEvents('on-open')" transition-mode="follow">
                    <div slot="right-menu">
                      <swipeout-button @click.native="onButtonClick('fav')" type="primary">同意</swipeout-button>
                      <swipeout-button @click.native="onButtonClick('delete')" type="warn">删除</swipeout-button>
                    </div>
                    <div slot="content" class="demo-content vux-1px-t">
                        this is a demo
                    </div>
                </swipeout-item>
            </swipeout> -->
        </div>
        <div class="bom-tip">请不要相信任何人发送的二维码链接,请勿私下交易谨防被骗</div>
        <!-- <button @click="IMregister">注册</button>
        <button @click="IMlogin">登录</button> -->
        <foot-nav/>
    </div>
</template>

<script>
    // import headers from '../components/header.vue'
    import axios from '@/api/request'
    import footNav from "@/components/footer-nav.vue"
    import {Cell,Group,CellBox,Card,Tab,TabItem} from "vux";
    import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
    import { mapState,mapGetters,mapMutations } from "vuex";
    

    export default {
        data() {
            return {
                tabItem: [
                    {id: 1, name: '二手市场'},
                    {id: 2, name: '店铺消息'},
                ],
                contengList:'',
                friendList: [
                    // {
                    //     id: 1, name: '买家12',
                    //     content: '资讯资讯资讯内容内容资讯资讯资讯内容内容',
                    //     date:'2017.12.26',
                    //     avrtar: require('../assets/images/2-avatar.jpg'),
                    //     img: require('../assets/images/2.jpg')
                    // },
                ]
            }
        },
        components: {
            TabItem,Cell, Group,CellBox,Tab,footNav,Swipeout,SwipeoutItem,SwipeoutButton
        },
        computed:{
            ...mapState({ 
                imIsLogin: state => state.IMISLOGIN,
            }),
            ...mapGetters({
              openId: 'doneOpenId',
              userId: 'doneUserId',
              phone: 'donePhone',
              schoolId: 'doneSchoolId',
              password: 'donePassword',
            }),
        },
        created() {
            console.log(this.imIsLogin)
            this.getFriends()
            this.getleave()
        },
        mounted() {
            let self = this
        },
        methods: {
            ...mapMutations(['SET_IMLOGINSTATUS']),
            getleave(){
              var data={
                  contentId:this.userId
              }
              var self=this
              axios('/device/news/allNews','post',data).then(res=>{
                    if(res.data.code==1000){
                        console.log(11) 
                        console.log(res) 
                        self.contengList=res.data.data[0]
                    }
                })
            },
            getBarWidth: function(index) {
                index = index || 0;
                let text = this.tabItem[index].name;
                // debugger
                return text.length * 16 / 37.5  + "rem";
            },
            onButtonClick (type) {
                alert('on button click ' + type)
            },
            handleEvents (type) {
                console.log('event: ', type)
            },
            goChat(item) {
                console.log(item)
                this.$router.push({path: '/chat',query:{fromGoods: false,servicePhone: item.serviceName,type: item.type}})
            },
            goleave(){  //
              this.$router.push({path:'/LeaveWord',query:{userId:this.userId}})
        
            },
            IMregister() {   //注册环信
                var option = {
                    username: "18062763119",
                    password: "123456",
                    nickname: '古月',
                    appKey: this.$WebIM.config.appkey,
                    success: function () {
                        // alert('regist success!');
                        console.log('regist success!');
                    },
                    error: function () {
                        // alert('regist error');
                        console.log('regist error');
                    },
                    apiUrl: this.$WebIM.config.apiURL
                };
                this.$imConn.registerUser(option);
            },
            IMlogin() {
                let self = this;
                var options = {
                    apiUrl: this.$WebIM.config.apiURL,
                    user: this.phone,
                    pwd: "123456",
                    appKey: this.$WebIM.config.appkey,
                    success: function (token) {
                        // console.log('登录成功'+token)
                        // var token = token.access_token;
                        // this.$WebIM.utils.setCookie('webim_' + encryptUsername, token, 1);
                        // self.$imConn.setPresence();//设置在线状态
                        // self.getFrends()
                    },
                    error: function(){
                    }
                };
                this.$imConn.open(options);
            },
            getFriends() {    //获取好友
                let data = { userName: this.phone}
                axios('/device/userFriends/selectAll','post',data).then(res=>{
                    if(res.data.code==1000){
                        console.log(222) 
                        console.log(res) 
                        this.friendList = res.data.data
                    }
                })
            },
            delFriends() {    //删除好友
                let data = { userName: '15594818160',serviceName: 'lm' }
                axios('/device/userFriends/deleteFriends','post',data).then(res=>{
                    if(res.data.code==1000){
                        console.log(res) 
                        // var haoyouList = res.data.data
                    }
                })
            },
            getUnread() {    //获取未读
                let data = {
                    // userName: "18062763119"
                    userName: this.phone
                }
                axios('/device/userEase/queryListUnread','post',data).then(res=>{
                    if(res.data.code==1000){
                        console.log(res) 
                        var haoyouList = res.data.data
                    }
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .demo-content {
        padding: 10px 10px;
    }
    .message-warp{
        height: 100%;
        box-sizing: border-box;
        // padding-top: 20rem/75;
        background: rgb(242,243,247);

        .vux-tab-wrap{
            padding-top: 0;
            height: 44px;
        }
    }
    .cell-box:nth-child(1){
        background: #eee;
    }
    .news-box {
        width: 100%;
        background: #fff;
        height: 180rem/75;
        border-bottom: 1rem/37.5 solid #dbdbdb;
        .left {
            width: 78rem/75;
            height: 78rem/75;
            border-radius: 50%;
            margin-left: 22rem/75;
            margin-top: 36rem/75;
        }
        .center {
            width: 462rem/75;
            margin-left: 22rem/75;
            margin-top: 34rem/75;
            margin-left: 18rem/75;
            margin-right: 20rem/75;
            .name-box {
                font-size: 13rem/37.5;
                color: #444444;
                font-weight: 600;
            }
            .section-line {
                font-size: 12rem/37.5;
                color: #999999;
                margin-top: 3rem/37.5;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .supplement{
                display: flex;
                justify-content: space-between;
                margin-top: 12rem/37.5;
                padding-bottom: 6rem/37.5;
            }
        }
        .right{
            margin-top: 34rem/75;
            width: 110rem/75;
            height: 110rem/75;
            border-radius: 6px;
            .redTip{
                background: #ff4444;
                width: 76rem/75;
                height: 36rem/75;
                line-height: 36rem/75;
                border-radius: 36rem/75;
                text-align: center;
                color: #fff;
            }
        }
    }
    .cell-box:last-child .news-box{
        border-bottom: none;
    }
    .first-cell-box .news-box{
        .right{
            margin-top: 72rem/75;
        }
    }
    .bom-tip{
        padding-top: 44rem/75;
        text-align: center;
        color: #999;
        font-size: 20rem/75;
    }
</style>

<style>
    .message-warp .vux-tab .vux-tab-item.vux-tab-selected {
        color: #feba4e;
    }

    .message-warp .vux-tab .vux-tab-item {
        color: #333333;
    }
</style>
